<template>
	<view class="container">
		<!-- 顶部选项卡 -->
		<view class="swiper-tab dis-flex flex-x-around flex-y-center">
			<block v-for="(item,index) in tabList" :key="index">
				<view class="swiper-tab-item" :class="[dataType == item.value ? 'on' : '']" :data-current="item.value" @tap="swichNav">{{item.text }}</view>
			</block>
		</view>
		<!-- 退款/售后单 -->
		<scroll-view scroll-y="true" @scrolltolower="triggerDownLoad" :style="[{height:Height}]">
			<view class="widget-list" v-if=" list.data &&list.data.length">
				<view class="widget-detail" v-for="(item,index) in list.data" :key="index" @tap="triggerDetail" :data-id="item.order_refund_id">
					<view class="row-block dis-flex flex-y-center">
						<view class="flex-box">{{item.create_time }}</view>
						<view class="flex-box t-r">
							<text class="col-m">{{item.state_text }}</text>
						</view>
					</view>
					<view class="detail-goods row-block dis-flex">
						<view class="goods-image">
							<image :src="item.order_goods.image.file_path" mode="aspectFit"></image>
						</view>
						<view class="goods-right flex-box">
							<view class="goods-name">
								<text class="twolist-hidden">{{item.order_goods.goods_name }}</text>
							</view>
							<view class="goods-attr">
								<text class="f-26 col-8">{{item.order_goods.goods_attr }}</text>
							</view>
							<view class="goods-num t-r">
								<text class="f-26 col-8">×{{item.order_goods.total_num }}</text>
							</view>
						</view>
					</view>
					<view class="detail-order row-block dis-flex flex-x-end flex-y-center">
						<text class="">付款金额：</text>
						<text class="col-m">￥{{item.order_goods.total_pay_price }}</text>
					</view>
					<view class="detail-operate row-block dis-flex flex-x-end flex-y-center">
						<view class="detail-btn btn-detail" @tap="triggerDetail" :data-id="item.order_refund_id">查看详情</view>
					</view>
				</view>
				<!-- 没有更多 -->
				<view v-if="list.data && list.data.length && !isLoading && no_more " class="no-more f-30">亲, 没有更多了</view>
			</view>
			<!-- 没有记录 -->
			<view class="yoshop-notcont" v-if="list.data && !list.data.length  && !isLoading ">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无退款/售后单哦</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		computed: {
			Height() {
				return uni.upx2px(this.swiperHeight*2) + 'px';
			}
		},
		data() {
			return {
				swiperHeight:'',
				list:{},
				tabList:{},
				applyStatus: [],
				isLoading: true,
				dataType: -1,
				page: 1,
				no_more: false,
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 设置swiper的高度
			this.setSwiperHeight();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 获取退款/售后单列表
			this.getRefundList();
		},

		methods: {
			/**
			 * 获取退款/售后单列表
			 */
			getRefundList: function(isNextPage, page) {
				let _this = this;
				_this._get('user.refund/lists', {
					state: _this.dataType,
					page: page || 1,
				}, function(result) {
					console.log(result.data);
					// 创建页面数据
					_this.setData(_this.createData(result.data, isNextPage));
				});
			},

			/**
			 * 创建页面数据
			 */
			createData: function(data, isNextPage) {
				data['isLoading'] = false;
				// 列表数据
				let dataList = this.list;
				if (isNextPage == true && (typeof dataList !== 'undefined')) {
					data.list.data = dataList.data.concat(data.list.data)
				}
				// 导航栏数据
				data['tabList'] = [{
					value: -1,
					text: '全部'
				}, {
					value: 0,
					text: '待处理'
				}];
				return data;
			},

			/**
			 * 设置swiper的高度
			 */
			setSwiperHeight: function() {
				// 获取系统信息(拿到屏幕宽度)
				let systemInfo = uni.getSystemInfoSync(),
					rpx = systemInfo.windowWidth / 750, // 计算rpx
					tapHeight = Math.floor(rpx * 82), // tap高度
					swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
				this.setData({
					swiperHeight
				});
			},

			/** 
			 * 点击tab切换 
			 */
			swichNav: function(e) {
				let _this = this,
					current = e.target.dataset.current;
				if (_this.dataType == current) {
					return false;
				}
				_this.setData({
					dataType: current,
					list: {},
					page: 1,
					no_more: false,
					isLoading: true,

				});
				_this.getRefundList();
			},

			/**
			 * 下拉到底加载数据
			 */
			triggerDownLoad: function() {
				// 已经是最后一页
				if (this.page >= this.list.last_page) {
					this.setData({
						no_more: true
					});
					return false;
				}
				// 获取退款/售后单列表
				this.getRefundList(true, ++this.page);
			},

			/**
			 * 跳转售后详情页
			 */
			triggerDetail: function(e) {
				uni.navigateTo({
					url: './detail/detail?order_refund_id=' + e.currentTarget.dataset.id
				});
			},
		}
	}
</script>

<style>
	.container {
		font-size: 28rpx;
		color: rgb(90, 90, 90);
	}

	/* 选项卡 */

	.swiper-tab {
		width: 100%;
		text-align: center;
		height: 80rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.swiper-tab .swiper-tab-item {
		width: 160rpx;
		height: 100%;
		color: #777;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 2px solid #ffffff00;
	}

	.swiper-tab .on {
		color: #ff495e;
		border-bottom: 2px solid #ff495e;
	}

	/* 设置scroll-view容器高度 */

	.widget-list,
	.yoshop-notcont {
		height: 100.1%;
	}

	/* 数据列表 */

	.widget-list {
		/* padding: 0 20rpx 40rpx 20rpx; */
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}

	.widget-detail {
		box-sizing: border-box;
		border-bottom: 1rpx solid #e7e7e7;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.widget-detail .row-block {
		padding: 0 20rpx;
		min-height: 70rpx;
	}

	.widget-detail .detail-goods {
		padding: 20rpx;
		background: #fbfbfb;
	}

	.widget-detail .detail-goods .goods-image {
		margin-right: 20rpx;
	}

	.widget-detail .detail-goods .goods-image image {
		display: block;
		width: 200rpx;
		height: 200rpx;
	}

	.widget-detail .detail-goods .goods-right {
		padding: 15rpx 0;
	}

	.widget-detail .detail-goods .goods-name {
		margin-bottom: 10rpx;
	}

	.widget-detail .detail-goods .goods-attr {
		min-height: 32rpx;
	}

	.widget-detail .detail-operate {
		border-top: 1px solid rgb(241, 241, 241);
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.widget-detail .detail-operate .detail-btn {
		border-radius: 4px;
		border: 1rpx solid #ccc;
		padding: 8rpx 20rpx;
		font-size: 28rpx;
		color: #555;
		margin-left: 10rpx;
	}
</style>
